<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = 'bold 20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Define coordinates ---
        const x_left = 100;
        const x_right = 400;
        const y_terminals = 80;
        const y_top_branch = 150;
        const y_bottom_branch = 250;
        const y_fig_label = 350;

        const resistor_w = 80;
        const resistor_h = 30;

        // --- Draw Resistors ---
        ctx.fillStyle = 'white'; // Fill resistors with white to hide the wire underneath

        // Top branch resistors
        const r1_x = 140;
        const r2_x = 280;
        ctx.fillRect(r1_x, y_top_branch - resistor_h / 2, resistor_w, resistor_h);
        ctx.strokeRect(r1_x, y_top_branch - resistor_h / 2, resistor_w, resistor_h);
        ctx.fillRect(r2_x, y_top_branch - resistor_h / 2, resistor_w, resistor_h);
        ctx.strokeRect(r2_x, y_top_branch - resistor_h / 2, resistor_w, resistor_h);

        // Bottom branch resistor
        const r3_x = (x_left + x_right - resistor_w) / 2;
        ctx.fillRect(r3_x, y_bottom_branch - resistor_h / 2, resistor_w, resistor_h);
        ctx.strokeRect(r3_x, y_bottom_branch - resistor_h / 2, resistor_w, resistor_h);
        
        // --- Draw Wires ---
        ctx.beginPath();
        // Top branch wires
        ctx.moveTo(x_left, y_top_branch);
        ctx.lineTo(r1_x, y_top_branch);
        ctx.moveTo(r1_x + resistor_w, y_top_branch);
        ctx.lineTo(r2_x, y_top_branch);
        ctx.moveTo(r2_x + resistor_w, y_top_branch);
        ctx.lineTo(x_right, y_top_branch);
        
        // Bottom branch wires
        ctx.moveTo(x_left, y_bottom_branch);
        ctx.lineTo(r3_x, y_bottom_branch);
        ctx.moveTo(r3_x + resistor_w, y_bottom_branch);
        ctx.lineTo(x_right, y_bottom_branch);
        
        // Vertical wires connecting branches
        ctx.moveTo(x_left, y_top_branch);
        ctx.lineTo(x_left, y_bottom_branch);
        ctx.moveTo(x_right, y_top_branch);
        ctx.lineTo(x_right, y_bottom_branch);

        // Input wires
        const terminal_x_left = 175;
        const terminal_x_right = 325;
        ctx.moveTo(terminal_x_left, y_terminals);
        ctx.lineTo(x_left, y_terminals);
        ctx.lineTo(x_left, y_top_branch); // Connects to the top of the left vertical wire
        
        ctx.moveTo(terminal_x_right, y_terminals);
        ctx.lineTo(x_right, y_terminals);
        ctx.lineTo(x_right, y_top_branch); // Connects to the top of the right vertical wire
        ctx.stroke();

        // --- Draw Terminals and Junctions ---
        ctx.fillStyle = 'black';
        // Terminals (open circles)
        ctx.beginPath();
        ctx.arc(terminal_x_left, y_terminals, 5, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(terminal_x_right, y_terminals, 5, 0, 2 * Math.PI);
        ctx.stroke();

        // Junctions (filled circles)
        ctx.beginPath();
        ctx.arc(x_left, y_bottom_branch, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(x_right, y_bottom_branch, 4, 0, 2 * Math.PI);
        ctx.fill();


        // --- Add Labels ---
        ctx.fillStyle = 'black';
        ctx.font = '22px Arial';
        // Voltage
        ctx.fillText('24 V', (terminal_x_left + terminal_x_right) / 2, y_terminals - 25);
        
        // Resistor values
        ctx.font = '20px Arial';
        const omega = '\u03A9';
        ctx.fillText('8.0 ' + omega, r1_x + resistor_w / 2, y_top_branch - 25);
        ctx.fillText('4.0 ' + omega, r2_x + resistor_w / 2, y_top_branch - 25);
        ctx.fillText('6.0 ' + omega, r3_x + resistor_w / 2, y_bottom_branch - 25);

        // Figure label
        ctx.font = 'bold 22px Arial';
        ctx.fillText('Fig. 8.1', (x_left + x_right) / 2, y_fig_label);

    </script>
</body>
</html>